<template>
  <div>
    <div class="output_sink">
      <TabPoint :pointList="pointList"> </TabPoint>
      <div id="pointBox" class="option_box">
        <el-form
          :rules="rules"
          ref="formName"
          style="width: 100%"
          label-position="top"
          :model="form"
        >
          <div class="title" id="option">选项</div>
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入名称"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="来源流名称">
            <el-input
              :disabled="true"
              v-model="form.from"
              placeholder=""
              size="small"
            ></el-input>
          </el-form-item>
          <div id="zhushi">
            <div class="title mt_sm mb_sm">注释</div>
            <el-checkbox slot="label" v-model="form.store.storeCheck"
              >@store</el-checkbox
            >
            <el-form-item
              class="no_req"
              label=""
              prop="store.type"
              :rules="[
                {
                  required: form.store.storeCheck,
                  message: 'store类型不能为空',
                  trigger: 'chenge',
                },
              ]"
            >
              <el-select
                style="margin-top: 10px"
                v-if="form.store.storeCheck"
                size="small"
                v-model="form.store.type"
                placeholder="请选择类型"
                @change="changeType"
              >
                <el-option
                  v-for="item in sources"
                  :key="item.name"
                  :value="item.name"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              style="display: flex"
              label="类别"
              prop="rdbmsType"
              v-if="form.type == 'rdbms'"
              :rules="[
                {
                  required: form.sourceList.length !== 0,
                  message: '类别不能为空',
                },
              ]"
            >
              <el-radio-group
                style="margin-left: 10px"
                v-model="form.rdbmsType"
                @change="rdbmsChange"
              >
                <el-radio :label="0">内联配置</el-radio>
                <el-radio :label="1">数据源</el-radio>
                <el-radio :label="2">Jndi资源</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="form.store.type && form.store.storeCheck">
              <div v-if="form.sourceList.length !== 0">
                <div
                  v-for="(item, index) in form.sourceList"
                  :key="item.zhName + index"
                >
                  <!-- 表单验证这里必须是form的直接子属性  sourceList.' + index + '.defaultValue'-->
                  <!-- {{ item.type[0] }} -->
                  <el-form-item
                    :prop="'sourceList.' + index + '.defaultValue'"
                    :rules="[
                      {
                        required: true,
                        message: item.zhName + '不能为空',
                        trigger: 'blur',
                      },
                      {
                        validator(rule, value, callback) {
                          validatorForm(rule, value, callback, item);
                        },
                        trigger: 'blur',
                      },
                    ]"
                    :label="item.zhName"
                    v-if="item.optional === false"
                  >
                    <!-- item.type[0] -->
                    <el-radio-group
                      v-model="item.defaultValue"
                      v-if="item.type && item.type[0] === 'BOOL'"
                    >
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                    <el-input
                      v-else
                      :show-password="item.zhName.indexOf('密码') != -1"
                      size="small"
                      v-model="item.defaultValue"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    v-else
                    :prop="'sourceList.' + index + '.defaultValue'"
                    :rules="[
                      {
                        required: false,
                        validator(rule, value, callback) {
                          validatorForm(rule, value, callback, item);
                        },
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-checkbox slot="label" v-model="item.isCheck">{{
                      item.zhName
                    }}</el-checkbox>
                    <div v-if="item.isCheck">
                      <!-- 判断是否是BOOL类型的(bool显示单选组其他显示输入框) -->
                      <el-radio-group
                        v-model="item.defaultValue"
                        v-if="item.type && item.type[0] === 'BOOL'"
                      >
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                      </el-radio-group>
                      <el-input
                        v-else
                        size="small"
                        v-model="item.defaultValue"
                      ></el-input>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="自定义选项">
                <div class="key_value_list">
                  <div style="margin-bottom: 10px" class="key_val_list">
                    <KeyValue
                      :propKey="'customOption.' + index + '.name'"
                      :propVal="'customOption.' + index + '.defaultValue'"
                      :rulesKey="[
                        {
                          required: true,
                          message: '键不能为空',
                          trigger: 'blur',
                        },
                        {
                          validator(rule, value, callback) {
                            validator(rule, value, callback);
                          },
                          trigger: 'blur',
                        },
                      ]"
                      :rulesVal="{
                        required: true,
                        message: '值不能为空',
                        trigger: 'blur',
                      }"
                      v-model="form.customOption[index]"
                      v-for="(item, index) in form.customOption"
                      :key="index"
                      @handDel="handDel(index, 'customOption')"
                    ></KeyValue>
                  </div>
                  <div class="key_v_btn" @click="handAddOption('customOption')">
                    <i
                      style="font-size: 12px; color: #666; margin-right: 10px"
                      class="el-icon-plus"
                    ></i>
                    <span> 添加 </span>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="">
            <el-checkbox
              class="pri_index_check"
              slot="label"
              v-model="form.isIndex"
              >@index</el-checkbox
            >
            <div class="key_value_list" v-if="form.isIndex">
              <div style="margin-bottom: 10px" class="key_val_list">
                <KeyValue
                  :isKey="false"
                  :propVal="'indexOption.' + index + '.defaultValue'"
                  :rulesVal="{
                    required: form.isIndex,
                    message: '值不能为空',
                    trigger: 'blur',
                  }"
                  v-model="form.indexOption[index]"
                  v-for="(item, index) in form.indexOption"
                  :key="index"
                  @handDel="handDel(index, 'indexOption')"
                ></KeyValue>
              </div>
              <div class="key_v_btn" @click="handAddOption('indexOption')">
                <i
                  style="font-size: 12px; color: #666; margin-right: 10px"
                  class="el-icon-plus"
                ></i>
                <span> 添加 </span>
              </div>
            </div>
            <el-checkbox
              class="pri_index_check"
              slot="label"
              v-model="form.isPurge"
              >@purge</el-checkbox
            >
            <div class="key_value_list no_req" v-if="form.isPurge">
              <div style="overflow-y: inherit" class="key_val_list">
                <div class="flex_center">
                  <el-form-item
                    label=""
                    prop="enableRadio"
                    :rules="[
                      {
                        required: form.enableCheck ? true : false,
                        message: 'enable不能为空',
                        trigger: 'chenge',
                      },
                    ]"
                  >
                    <el-checkbox slot="label" v-model="form.enableCheck"
                      >enable</el-checkbox
                    >
                    <el-radio-group
                      v-if="form.enableCheck"
                      v-model="form.enableRadio"
                    >
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item
                    label=""
                    prop="passwordVal"
                    :rules="[
                      {
                        required: form.passwordCheck ? true : false,
                        message: 'key.store.password不能为空',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-checkbox
                      class="mb_sm"
                      slot="label"
                      v-model="form.passwordCheck"
                      >key.store.password</el-checkbox
                    >
                    <el-input
                      v-if="form.passwordCheck"
                      v-model="form.passwordVal"
                      placeholder=""
                      size="small"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
            <el-checkbox
              class="pri_index_check"
              slot="label"
              v-model="form.isByID"
              >@partitionById</el-checkbox
            >
            <div class="key_value_list no_req" v-if="form.isByID">
              <div class="key_val_list">
                <div class="flex_center">
                  <el-form-item
                    label=""
                    prop="enableByIDRadio"
                    :rules="[
                      {
                        required: form.enableByIDCheck ? true : false,
                        message: 'enable不能为空',
                        trigger: 'change',
                      },
                    ]"
                  >
                    <el-checkbox slot="label" v-model="form.enableByIDCheck"
                      >enable</el-checkbox
                    >
                    <el-radio-group
                      v-if="form.enableByIDCheck"
                      v-model="form.enableByIDRadio"
                    >
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </div>
            <Notes :items="treeItems" ref="notesRef"></Notes>
          </div>
          <!-- 投射 -->
          <div id="toushe">
            <div class="title" style="margin-bottom: 10px">投射</div>
            <el-select
              size="small"
              class="mb_sm"
              v-model="form.select.type"
              placeholder="请选择类型"
            >
              <el-option value="ALL" label="所有属性"></el-option>
              <el-option
                value="USER_DEFINED"
                label="用户自定义属性"
              ></el-option>
            </el-select>
            <div
              class="key_value_list"
              v-if="form.select.type === 'USER_DEFINED'"
            >
              <div class="key_val_list">
                <KeyValue
                  :isPopoverInput="false"
                  :propVal="'userDefinedOption.' + index + '.defaultValue'"
                  :isKey="false"
                  :rulesVal="{
                    required: true,
                    message: '值不能为空',
                    trigger: 'blur',
                  }"
                  v-model="form.userDefinedOption[index]"
                  v-for="(item, index) in form.userDefinedOption"
                  :key="index"
                  @handDel="handDel(index, 'userDefinedOption')"
                ></KeyValue>
              </div>
              <div
                class="key_v_btn"
                @click="handAddOption('userDefinedOption')"
              >
                <i
                  style="font-size: 12px; color: #666; margin-right: 10px"
                  class="el-icon-plus"
                ></i>
                <span> 添加 </span>
              </div>
            </div>
            <div class="grouping_box">
              <!-- 从上一个流带过来的 属性 有几个 就只能添加几个 -->
              <el-checkbox class="mt_sm mb_sm" v-model="form.isGroupBy"
                >按属性分组</el-checkbox
              >
              <div v-if="form.isGroupBy">
                <div
                  class="grou_sele modul_bg grou_list"
                  v-for="(li, i) in inputList"
                  :key="li.id"
                >
                  <el-select
                    @change="changeGrop"
                    class="flow_sele"
                    v-model="li.name"
                    placeholder=""
                    clearable
                    filterable
                    size="small"
                  >
                    <!-- 选中的下一个下拉框不能在选择 -->
                    <el-option
                      :disabled="
                        inputList.map((i2) => i2.name).includes(item.name)
                      "
                      v-for="(item, index) in attributeList"
                      :key="item.id + index"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <svg-icon
                    v-if="i == 0"
                    class="trash icon"
                    icon-class="plus"
                    @click="handAddGroup()"
                  ></svg-icon>
                  <svg-icon
                    v-else
                    class="trash icon"
                    icon-class="trash"
                    @click="handDelGroup(i)"
                  ></svg-icon>
                </div>
              </div>
            </div>
          </div>
          <!-- 局和条件 -->
          <div id="tiaojian">
            <div class="title mb_sm mt_sm">聚合条件</div>
            <el-radio-group
              class="mb_sm"
              v-model="form.aggregateByTimePeriod.type"
              @change="handRadioTime"
            >
              <el-radio label="INTERVAL">按时间间隔</el-radio>
              <el-radio label="RANGE">按时间范围</el-radio>
            </el-radio-group>
            <div class="key_value_list">
              <el-form-item
                v-if="form.aggregateByTimePeriod.type === 'INTERVAL'"
                label=""
                prop="aggregateByTimePeriod.value"
                :rules="[
                  {
                    required:
                      form.aggregateByTimePeriod.type === 'INTERVAL'
                        ? true
                        : false,
                    message: '按时间间隔不能为空',
                    trigger: 'change',
                  },
                ]"
              >
                <el-checkbox-group v-model="form.aggregateByTimePeriod.value">
                  <el-checkbox
                    :validate-event="false"
                    v-for="item in timeList"
                    :key="item.id"
                    :label="item.id"
                    >{{ item.name }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>

              <div
                class="granularity_box"
                v-if="form.aggregateByTimePeriod.type === 'RANGE'"
              >
                <div class="gr_box">
                  <div class="gr_title">Starting Time Granularity</div>
                  <el-form-item
                    label=""
                    prop="aggregateByTimePeriod.value.min"
                    :rules="[
                      {
                        trigger: 'blur',
                        required:
                          form.aggregateByTimePeriod.type === 'RANGE'
                            ? true
                            : false,
                        message: '按时间范围最小值不能为空',
                      },
                    ]"
                  >
                    <el-select
                      class="flow_sele"
                      v-model="form.aggregateByTimePeriod.value.min"
                      placeholder=""
                      clearable
                      filterable
                      size="small"
                    >
                      <!-- 选中的下一个下拉框不能在选择 -->
                      <el-option
                        :disabled="
                          [form.aggregateByTimePeriod.value.max].includes(
                            item.id
                          )
                        "
                        v-for="(item, index) in timeList"
                        :key="item.id + index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
                <div class="gr_box">
                  <div class="gr_title">Ending Time Granularity</div>
                  <el-form-item
                    label=""
                    prop="aggregateByTimePeriod.value.max"
                    :rules="[
                      {
                        trigger: 'blur',
                        required:
                          form.aggregateByTimePeriod.type === 'RANGE'
                            ? true
                            : false,
                        message: '按时间范围最大值不能为空',
                      },
                    ]"
                  >
                    <el-select
                      class="flow_sele"
                      v-model="form.aggregateByTimePeriod.value.max"
                      placeholder=""
                      clearable
                      filterable
                      size="small"
                    >
                      <!-- 选中的下一个下拉框不能在选择 -->
                      <!-- [form.aggregateByTimePeriod.value.min].includes(item.id) -->
                      <el-option
                        :disabled="
                          [form.aggregateByTimePeriod.value.min].includes(
                            item.id
                          )
                        "
                        v-for="(item, index) in timeList"
                        :key="item.id + index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="grouping_box no_req">
              <!-- 从上一个流带过来的 属性 有几个 就只能添加几个 -->
              <el-checkbox
                v-model="form.isAggregateByAttribute"
                class="mb_sm mt_sm"
                >按属性</el-checkbox
              >
              <el-form-item
                v-if="form.isAggregateByAttribute"
                label=""
                prop="aggregateByAttribute"
                :rules="[
                  {
                    trigger: 'change',
                    required: form.isAggregateByAttribute,
                    message: '按属性不能为空',
                  },
                ]"
              >
                <div class="grou_sele modul_bg grou_list">
                  <el-select
                    class="flow_sele"
                    v-model="form.aggregateByAttribute"
                    placeholder=""
                    clearable
                    filterable
                    size="small"
                  >
                    <!-- 选中的下一个下拉框不能在选择 -->
                    <el-option
                      v-for="(item, index) in attributeList"
                      :key="item.id + index"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 确认取消公共组件 -->
    <TopOperationButton @submit="submit" @handClose="handClose" />
  </div>
</template>

<script>
const filterData = ["index", "purge", "partitionById", "PrimaryKey"];
// mixins
let that = null;
import { optionForm } from "@/mixin/optionForm";
import Notes from "./component/Notes.vue";
import {
  getSourceMapList,
  setSourceMapList,
  setCheck,
  setOptions,
} from "@/views/edge/inputSourcePage/js/index";
import { generateId, reverseJson, empty } from "@/utils/index";
export default {
  mixins: [optionForm],
  components: {
    Notes,
  },

  props: {
    nodeDataRight: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    extensionsLR() {
      let attrArr =
        this.$store.state.projection.extensions.funArr.find(
          (item) => item.name == "属性"
        )?.list || [];

      attrArr = attrArr.filter((item) => {
        return item.isOption;
      });
      return attrArr;
    },
  },
  watch: {
    nodeDataRight: {
      handler: async function (newData, oldData) {
        // metadata添加一个选中标识
        this.sources = setCheck(this.succSin.stores);
        if (newData) {
          let tempdata = JSON.parse(JSON.stringify(newData));
          console.log(tempdata, "节点", this.sources);
          this.newData = tempdata;
          // 取后一个节点属性
          const {
            aggregateByAttribute,
            objectState,
            select,
            store,
            annotationListObjects,
            relateData,
            aggregateByTimePeriod,
            groupBy,
          } = tempdata;
          if (aggregateByAttribute) {
            this.form.isAggregateByAttribute = true;
            this.form.aggregateByAttribute = aggregateByAttribute;
          }
          // id: generateId(),
          //   name: item,
          //   attributeList: this.attributeList,
          const { sourceCell } = relateData;
          if (groupBy && groupBy.length !== 0) {
            this.form.isGroupBy = true;
            this.inputList = groupBy.map((item) => ({
              id: generateId(),
              name: item,
            }));
          }
          if (select) {
            this.form.select = select;
            // this.inputList = setUserAttr(
            //   select.value,
            //   sourceCell.attributeList
            // );
            if (select.type == "ALL") {
              this.form.select.type = "ALL";
              this.form.select.value = "*";
            } else {
              this.form.userDefinedOption = select.value.map((item) => {
                return {
                  ...item,
                  defaultValue: item.expression,
                };
              });
            }
          }
          if (sourceCell) {
            this.$store.commit("projection/setExtensions", {
              relateData: tempdata.relateData,
              // isName: true,
            });
            this.attributeList = _.cloneDeep(sourceCell.attributeList);
            this.attributeList.forEach((item) => {
              item.id = generateId();
              item.value = item.name;
              item.disabled = false;
            });
            this.inputList[0].name = this.attributeList[0].name;

            const { name } = sourceCell;
            this.form.from = name;
          }
          if (aggregateByTimePeriod) {
            this.form.aggregateByTimePeriod = aggregateByTimePeriod;
          }
          if (annotationListObjects) {
            this.setPriIndex(annotationListObjects);
            this.$nextTick(() => {
              // 自定义注解整理
              this.$refs.notesRef.treeItems = reverseJson(
                annotationListObjects,
                filterData
              );
            });
          }
          this.form.name = tempdata.name || "";

          if (store) {
            const { options, type } = store;
            if (type) {
              this.form.store.storeCheck = true;
              this.form.store.type = type || "";

              // 取出来原始的source数组
              const parameters =
                this.sources.find((item) => item.name == type)?.parameters ||
                [];
              if (options) {
                // 区分出来自定义和原始数据
                const scuObj = setSourceMapList(options, parameters);
                const scuOptions = scuObj.options;
                if (type == "rdbms") {
                  const newOption = setOptions(
                    options,
                    this.sources.find((item) => item.name == type)
                  );
                  this.form.sourceList = newOption.parameters;
                  this.form.rdbmsType = newOption.id;
                } else {
                  this.form.sourceList = scuOptions;
                }
                this.form.customOption = scuObj.customOption;
              }
              // 回显输入框组
              // if (options) {
              //   // 区分出来自定义和原始数据
              //   const scuObj = setSourceMapList(options, parameters);
              //   const scuOptions = scuObj.options;
              //   this.form.sourceList = scuOptions;
              //   this.form.customOption = scuObj.customOption;
              // }
            }
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            validator(rule, value, callback) {
              var reg = /^[a-zA-Z][-_a-zA-Z0-9]{0,5}/;
              if (that.$regTextName(value)) {
                callback();
              } else {
                callback(
                  new Error("属性名称首位必须为字母且不能包含特殊符号和空格")
                );
              }
            },
          },
        ],
      },
      pointList: [
        {
          name: "选项",
          id: "option",
          val: "option",
        },
        {
          name: "注释",
          id: "zhushi",
          val: "zhushi",
        },
        {
          name: "投射",
          id: "toushe",
          val: "toushe",
        },
        {
          name: "条件",
          id: "tiaojian",
          val: "tiaojian",
        },
      ],
      timeList: [
        {
          id: "SECONDS",
          name: "seconds",
        },
        {
          id: "MINUTES",
          name: "minutes",
        },
        {
          id: "HOURS",
          name: "hours",
        },
        {
          id: "DAYS",
          name: "days",
        },
        {
          id: "MONTHS",
          name: "months",
        },
        {
          id: "YEARS",
          name: "years",
        },
      ],
      inputList: [
        { id: generateId(), name: "", attributeList: this.attributeList },
      ],

      attributeList: [],
      form: {
        rdbmsType: 0,
        groupBy: [],
        aggregateByTimePeriod: {
          type: "INTERVAL",
          // range
          value: [],
        },
        store: {
          options: [],
          type: "",
          storeCheck: false,
        },
        isGroupBy: false,
        isAggregateByAttribute: false,
        aggregateByAttribute: "",
        select: {
          type: "ALL", //ALL USER_DEFINED 所有属性,用户自定义属性
          value: [], //用户自定义属性
        },
        isIndex: false,
        isPurge: false,
        isByID: false,
        enableByIDRadio: false,
        enableByIDCheck: false,
        passwordCheck: false,
        passwordVal: "",
        enableRadio: false,
        enableCheck: false,
        userDefinedOption: [{ name: "", defaultValue: "", isCheck: true }],
        indexOption: [{ name: "", defaultValue: "", isCheck: true }],
        sourceList: [],
        attributeList: [],
        name: "",
      },
      treeItems: [],
    };
  },
  created() {
    that = this;
    // console.log("created");
  },
  methods: {
    handRadioTime(type) {
      if (type == "INTERVAL") {
        this.form.aggregateByTimePeriod.value = [];
      } else {
        this.form.aggregateByTimePeriod.value = {
          min: "",
          max: "",
        };
      }
    },
    handDelGroup(i) {
      this.inputList.splice(i, 1);
    },
    // 设置默认值(双向绑定)
    changeGrop(val) {},
    handAddGroup(attrLength) {
      if (this.inputList.length >= this.attributeList.length) {
        this.$msg("超出属性,不可添加!");
        return;
      }
      this.inputList.push({
        id: generateId(),
        name: "",
        attributeList: this.attributeList,
      });
    },
    setPriIndex(data) {
      data.forEach((item) => {
        if (item.name == "index") {
          this.form.isIndex = true;
          this.form.indexOption = item.elements.map((m) => {
            return {
              defaultValue: m.value,
            };
          });
        }
        if (item.name == "partitionById") {
          this.form.isByID = true;
          this.form.enableByIDRadio =
            item.elements.find((f) => f.key == "enable")?.value == "true"
              ? true
              : false || "";
          this.form.enableByIDCheck =
            this.form.indexOption !== "" ? true : false;
        }
        if (item.name == "purge") {
          this.form.isPurge = true;
          let enableObj = item.elements.find((f) => f.key == "enable");
          let isEnable = enableObj?.value || false;
          this.form.enableRadio = isEnable == "true" ? true : false;
          this.form.enableCheck = enableObj ? true : false;
          this.form.passwordVal =
            item.elements.find((f) => f.key == "interval")?.value || "";
          this.form.passwordCheck = this.form.passwordVal ? true : false;
        }
      });
    },
    setIndex(notesList) {
      if (this.form.isIndex) {
        notesList.annotationListObjects.unshift({
          elements: this.form.indexOption.map((item) => ({
            value: item.defaultValue,
          })),
          name: "index",
          annotations: [],
        });
        let indexOption = this.form.indexOption.map(
          (item) => `'${item.defaultValue}'`
        );
        notesList.annotationList.unshift(`@index(${indexOption.join(",")})`);
      }
    },
    setPurge(notesList) {
      if (this.form.isPurge) {
        // @purge(enable = \"true\", interval = \"10 sec\")
        let purgeStrs = "";
        let purgeArr = [];
        if (this.form.enableCheck) {
          purgeStrs += `enable='${this.form.enableRadio}'`;
          purgeArr.push({
            key: "enable",
            value: this.form.enableRadio,
          });
        }
        if (this.form.passwordCheck) {
          purgeStrs += `, interval='${this.form.passwordVal}'`;
          purgeArr.push({
            key: "interval",
            value: this.form.passwordVal,
          });
        }
        notesList.annotationListObjects.unshift({
          elements: purgeArr,
          name: "purge",
          annotations: [],
        });
        notesList.annotationList.unshift(`@purge(${purgeStrs})`);
      }
    },
    setEnableByID(notesList) {
      if (this.form.isByID) {
        let purgeArr = [];
        if (this.form.enableByIDCheck) {
          purgeArr.push({
            key: "enable",
            value: this.form.enableByIDRadio,
          });
        }
        notesList.annotationListObjects.unshift({
          elements: purgeArr,
          name: "purge",
          annotations: [],
        });
        notesList.annotationList.unshift(
          `@partitionById(enable='${this.form.enableByIDRadio}')`
        );
      }
    },
    setGroupBy() {
      if (this.form.isGroupBy) {
        this.form.groupBy = this.inputList.map((item) => item.name);
      }
    },
    setSelect() {
      if (this.form.select.type == "ALL") {
        this.form.select.value = "*";
      } else {
        this.form.select.value = this.form.userDefinedOption.map((item) => {
          return {
            as: "",
            expression: item.defaultValue,
          };
        });
      }
    },
    setStore() {
      const sourceOption = getSourceMapList(this.form.sourceList);
      const customOption = getSourceMapList(this.form.customOption);
      this.form.store.options = _.concat(sourceOption, customOption);
    },
    submit() {
      // const data = this.sourceList
      // 选项+自定义选项
      this.$refs["formName"].validate((valid) => {
        if (valid) {
          // store的下拉框 输入框组和自定义属性

          // 注解
          let notesList = this.$refs.notesRef.getNotes();
          const treeItems = this.$refs.notesRef.treeItems;
          this.setStore();
          this.setIndex(notesList);
          this.setPurge(notesList);
          this.setEnableByID(notesList);
          this.setGroupBy();
          this.setSelect();
          //  this.form.sourceList
          // select
          notesList.annotationList = notesList.annotationList.filter(
            (item) => item != ""
          );
          // groupBy
          Object.assign(this.form, notesList);
          let returnData = {
            display: false,
            type: "aggregationList",
            objectState: this.nodeDataRight.objectState,
            nodeData: this.form,
            treeItems,
            nodeDataRight: this.nodeDataRight,
          };
          console.log(returnData, "notesList");
          this.$emit("returnSource", returnData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.no_req {
  /deep/ .el-form-item__label:after {
    content: "" !important;
    margin-right: 0;
  }
}
.granularity_box {
  display: flex;
  .gr_box {
    width: 100%;
    &:last-child {
      margin-left: 10px;
    }
  }
  .gr_title {
    color: #666666;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.grouping_box {
  .icon {
    margin-left: 6px;
    color: #999;
  }
  .grou_list {
    padding: 10px;
  }
  .flow_sele {
    width: 100%;
  }
  .title {
    margin: 20px 0;
  }
}
.grou_sele {
  display: flex;
  align-items: center;
}
.flex_center {
  display: flex;
  align-items: center;
}
.mb_sm {
  margin-bottom: 10px;
}
.mt_sm {
  margin-top: 10px;
}
.output_sink {
  display: flex;
  /deep/ .notes_box {
    margin-top: 0;
  }

  .pri_index_check {
    margin: 10px 0;
    display: block;
  }
  .key_val_list {
    max-height: 600px;
    overflow-y: auto;
  }
  /deep/ .el-tabs__header {
    height: 80vh;
  }
  /deep/ .attributeDrag {
    margin-top: 0;
  }
  .key_value_list {
    padding: 15px;
    /* padding-bottom: 0; */
    background: rgba(233, 233, 233, 0.3);
    .key_v_btn {
      height: 32px;
      width: 100%;
      border: 1px solid #999999;
      display: flex;
      align-items: center;
      justify-content: center;

      border-radius: 6px;
      cursor: pointer;
      span {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
.option_box {
  height: 80vh;
  width: 100%;
  overflow-y: auto;
  padding-right: 10px;
  /deep/ .el-select {
    width: 100%;
  }
  /deep/ .el-form-item__label {
    padding-bottom: 0 !important;
    width: auto;
  }
  /deep/ .el-form-item {
    margin-bottom: 0;
    width: 100%;
  }
  /deep/ .el-radio {
    margin-right: 0;
  }

  .title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>